<template>
  <div class="base64-tool">
    <div class="tool-header">
      <h1>Base64编码解码工具</h1>
      <p>快速进行Base64编码和解码操作</p>
    </div>

    <div class="tool-container">
      <el-row :gutter="20">
        <!-- 输入区域 -->
        <el-col :span="12">
          <div class="input-section">
            <div class="section-header">
              <h3>输入内容</h3>
              <div class="actions">
                <el-button @click="clearInput" size="small">清空</el-button>
                <el-button @click="pasteFromClipboard" size="small" type="primary">粘贴</el-button>
              </div>
            </div>
            
            <el-input
              v-model="inputText"
              type="textarea"
              :rows="8"
              placeholder="请输入要编码或解码的文本..."
              @input="handleInput"
            />
            
            <div class="input-actions">
              <el-button 
                type="primary" 
                @click="encode"
                :disabled="!inputText.trim()"
                :loading="isProcessing"
              >
                <el-icon><Lock /></el-icon>
                编码
              </el-button>
              <el-button 
                type="success" 
                @click="decode"
                :disabled="!inputText.trim()"
                :loading="isProcessing"
              >
                <el-icon><Unlock /></el-icon>
                解码
              </el-button>
            </div>
          </div>
        </el-col>

        <!-- 输出区域 -->
        <el-col :span="12">
          <div class="output-section">
            <div class="section-header">
              <h3>输出结果</h3>
              <div class="actions">
                <el-button @click="copyResult" size="small" :disabled="!outputText">复制</el-button>
                <el-button @click="clearOutput" size="small">清空</el-button>
              </div>
            </div>
            
            <el-input
              v-model="outputText"
              type="textarea"
              :rows="8"
              placeholder="编码或解码的结果将显示在这里..."
              readonly
            />
            
            <div class="output-info" v-if="outputText">
              <el-tag type="info" size="small">
                字符数: {{ outputText.length }}
              </el-tag>
              <el-tag type="success" size="small" v-if="lastOperation">
                操作: {{ lastOperation }}
              </el-tag>
            </div>
          </div>
        </el-col>
      </el-row>

      <!-- 示例和说明 -->
      <div class="tool-info">
        <el-card>
          <template #header>
            <div class="card-header">
              <span>使用说明</span>
            </div>
          </template>
          
          <div class="info-content">
            <h4>什么是Base64？</h4>
            <p>Base64是一种用64个字符来表示任意二进制数据的方法。它常用于在文本协议中传输二进制数据，如电子邮件、XML等。</p>
            
            <h4>使用场景：</h4>
            <ul>
              <li>在URL中传输二进制数据</li>
              <li>在XML、JSON中嵌入二进制数据</li>
              <li>电子邮件附件编码</li>
              <li>简单的数据加密（注意：Base64不是加密算法）</li>
            </ul>
            
            <h4>示例：</h4>
            <div class="example">
              <p><strong>原文：</strong>Hello World!</p>
              <p><strong>Base64编码：</strong>SGVsbG8gV29ybGQh</p>
            </div>
          </div>
        </el-card>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import { Lock, Unlock } from '@element-plus/icons-vue'

const inputText = ref('')
const outputText = ref('')
const isProcessing = ref(false)
const lastOperation = ref('')

const handleInput = () => {
  // 输入变化时的处理逻辑
}

const encode = async () => {
  if (!inputText.value.trim()) {
    ElMessage.warning('请输入要编码的内容')
    return
  }
  
  isProcessing.value = true
  try {
    // 模拟处理延迟
    await new Promise(resolve => setTimeout(resolve, 300))
    
    const encoded = btoa(unescape(encodeURIComponent(inputText.value)))
    outputText.value = encoded
    lastOperation.value = '编码'
    ElMessage.success('编码完成')
  } catch (error) {
    ElMessage.error('编码失败：' + error.message)
  } finally {
    isProcessing.value = false
  }
}

const decode = async () => {
  if (!inputText.value.trim()) {
    ElMessage.warning('请输入要解码的内容')
    return
  }
  
  isProcessing.value = true
  try {
    // 模拟处理延迟
    await new Promise(resolve => setTimeout(resolve, 300))
    
    const decoded = decodeURIComponent(escape(atob(inputText.value)))
    outputText.value = decoded
    lastOperation.value = '解码'
    ElMessage.success('解码完成')
  } catch (error) {
    ElMessage.error('解码失败：' + error.message)
  } finally {
    isProcessing.value = false
  }
}

const clearInput = () => {
  inputText.value = ''
  ElMessage.info('已清空输入内容')
}

const clearOutput = () => {
  outputText.value = ''
  lastOperation.value = ''
  ElMessage.info('已清空输出结果')
}

const copyResult = async () => {
  if (!outputText.value) {
    ElMessage.warning('没有可复制的内容')
    return
  }
  
  try {
    await navigator.clipboard.writeText(outputText.value)
    ElMessage.success('已复制到剪贴板')
  } catch (error) {
    // 降级方案
    const textArea = document.createElement('textarea')
    textArea.value = outputText.value
    document.body.appendChild(textArea)
    textArea.select()
    document.execCommand('copy')
    document.body.removeChild(textArea)
    ElMessage.success('已复制到剪贴板')
  }
}

const pasteFromClipboard = async () => {
  try {
    const text = await navigator.clipboard.readText()
    inputText.value = text
    ElMessage.success('已粘贴内容')
  } catch (error) {
    ElMessage.error('无法访问剪贴板，请手动粘贴')
  }
}
</script>

<style scoped>
.base64-tool {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.tool-header {
  text-align: center;
  margin-bottom: 40px;
}

.tool-header h1 {
  font-size: 2.5rem;
  color: #333;
  margin-bottom: 10px;
}

.tool-header p {
  color: #666;
  font-size: 1.1rem;
}

.tool-container {
  margin-bottom: 40px;
}

.input-section,
.output-section {
  background: white;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  border: 1px solid #f0f0f0;
  height: 100%;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.section-header h3 {
  color: #333;
  margin: 0;
  font-size: 1.3rem;
}

.actions {
  display: flex;
  gap: 8px;
}

.input-actions {
  margin-top: 20px;
  display: flex;
  gap: 12px;
}

.output-info {
  margin-top: 15px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.tool-info {
  margin-top: 40px;
}

.card-header {
  font-weight: bold;
  color: #333;
}

.info-content h4 {
  color: #333;
  margin: 20px 0 10px 0;
  font-size: 1.1rem;
}

.info-content p {
  color: #666;
  line-height: 1.6;
  margin-bottom: 15px;
}

.info-content ul {
  color: #666;
  padding-left: 20px;
  margin-bottom: 15px;
}

.info-content li {
  margin-bottom: 5px;
}

.example {
  background: #f8f9fa;
  padding: 15px;
  border-radius: 8px;
  border-left: 4px solid #667eea;
}

.example p {
  margin: 5px 0;
  font-family: 'Courier New', monospace;
}

@media (max-width: 768px) {
  .tool-header h1 {
    font-size: 2rem;
  }
  
  .section-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  
  .input-actions {
    flex-direction: column;
  }
  
  .output-info {
    flex-direction: column;
    align-items: flex-start;
  }
}
</style>
